<template>
	<div class="container">
		<el-breadcrumb separator="/" style="margin-left: 20px;">
		  <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item  v-for="(item,index) in $route.meta" :key="index">{{item}}</el-breadcrumb-item>
		</el-breadcrumb>
		
		<el-dropdown @command="handleCommand" style="margin-right: 100px;">
		  <span class="el-dropdown-link">
		    <img src="../assets/logo.png" ><i class="el-icon-arrow-down el-icon--right"></i>
		  </span>
		  <el-dropdown-menu slot="dropdown">
		    <el-dropdown-item command="home">首页</el-dropdown-item>
		    <el-dropdown-item command="signout">退出</el-dropdown-item>
		  </el-dropdown-menu>
		</el-dropdown>

	</div>
</template>

<script>
	import {baseImgpath} from '../config/url.js'
	import { mapActions, mapState } from "vuex"
	export default{
		data(){
			return{
				baseImgpath
			}
		},
		created(){
			if (!this.adminInfo.id) {
				this.getAdminData()
			}
		},
		computed:{
			...mapState(['adminInfo']),
		},
		methods: {
			...mapActions(['getAdminData']),
			handleCommand(command) {
				if(command == 'home'){
					this.$router.push('/index');
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.el-dropdown-link {
	    cursor: pointer;
	    color: #409EFF;
	  }
	  .el-icon-arrow-down {
	    font-size: 12px;
	  }
	  .container{
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  background-color: #eff2f7;
		  height: 60px;
		 img{
		  width: 36px;
		  height: 36px;
	  } 
	  }
	  
</style>
